/* image-upload 图片上传 */
$image-upload: (
  'box-width': 120px,
  'box-height': 120px,
  'list-item-margin': 5px,
  'list-item-bg-color': getCssVar('bg-color'),
  'list-item-border': 1px solid getCssVar('border-color', 'light'),
  'list-item-border-radius': getCssVar('border-radius', 'base'),
  'list-item-box-shadow': getCssVar('box-shadow'),
  'list-item-cover-bg-color': rgb(0 0 0 / 60%),
  'list-item-cover-i-color': getCssVar('color-white'),
  'list-item-cover-i-size': getCssVar('font-size', 'extra-large'),
  'list-item-cover-i-margin': 0 2px,
);

$grid-image-upload: (
  'box-width': 80px,
  'box-height': 32px,
);

@include b('image-cropping-upload') {
  @include set-component-css-var('image-upload', $image-upload);
  @include set-component-css-var('grid-image-upload', $grid-image-upload);

  display: flex;
  align-items: center;

  .el-upload--picture-card {
    width: getCssVar('image-upload', 'box-width');
    height: getCssVar('image-upload', 'box-height');
  }

  @include e('btn') {
    width: getCssVar('image-upload', 'box-width');
    height: getCssVar('image-upload', 'box-height');
    line-height: getCssVar('image-upload', 'box-height');
  }

  @include e('list-item') {
    position: relative;
    display: inline-block;
    width: getCssVar('image-upload', 'box-width');
    height: getCssVar('image-upload', 'box-height');
    margin-right: getCssVar('image-upload', 'list-item-margin');
    line-height: getCssVar('image-upload', 'box-height');
    text-align: center;
    background: getCssVar('image-upload', 'list-item-bg-color');
    border: getCssVar('image-upload', 'list-item-border');
    border-radius: getCssVar('image-upload', 'list-item-border-radius');
    box-shadow: getCssVar('image-upload', 'list-item-box-shadow');

    img {
      width: 100%;
      height: 100%;
      vertical-align: top;
      object-fit: contain;
    }

    &:hover {
      @include e('list-item-cover') {
        display: block;
      }
    }
  }

  @include e('list-item-cover') {
    position: absolute;
    inset: 0;
    display: none;
    background: getCssVar('image-upload', 'list-item-cover-bg-color');

    ion-icon {
      margin: getCssVar('image-upload', 'list-item-cover-i-margin');
      font-size: getCssVar('image-upload', 'list-item-cover-i-size');
      color: getCssVar('image-upload', 'list-item-cover-i-color');
      cursor: pointer;
    }

    img {
      width: 100%;
      height: 100%;
      vertical-align: top;
    }
  }

  @include e('image-upload-add') {
    font-size: getCssVar('font-size', 'header-2');
    color: getCssVar(color, text, 3);
  }

  // 禁用态样式
  @include m('disabled') {
    @include e('download-icon') {
      display: none;
    }
    @include e('remove-icon') {
      display: none;
    }
  }

  // 只读态样式
  @include m('readonly') {
    @include e('remove-icon') {
      display: none;
    }

    .el-upload--picture-card{
      display: none;
    }    
  }

  // 预览态自适应大小模式
  @include m('autosize'){   
    object-fit: cover;
    justify-content: center;
    .#{bem('image-upload','list-item')}{
      width: 100%;
      height: 100%;
    }
    .#{bem('image-upload','list-item-cover')}{
      display: none;
      visibility: hidden;
    }
    
  }
}

@include b('image-caropping-upload-modal') {
  @include e('img') {
    width: 100%;
  }
}

@include b(image-caropping-upload-icon){
  @include when(not-show){
    display: none;
  }
}

// 嵌入表格编辑列特殊样式
.#{bem(grid-field-edit-column, editor)} {
  &.#{bem(image-upload)} {
    flex-wrap: wrap;

    .el-upload--picture-card{
      width: getCssVar(grid-image-upload, box-width);
      height: getCssVar(grid-image-upload, box-height);
    }

    .#{bem(image-caropping-upload, image-upload-list)} {
      @include flex(row, flex-start, center);

      flex-wrap: wrap;
    }

    .#{bem(image-caropping-upload, list-item)} {
      width: getCssVar(grid-image-upload, box-width);
      height: getCssVar(grid-image-upload, box-height);
      margin: getCssVar(spacing, extra-tight) getCssVar(spacing, extra-tight) getCssVar(spacing, extra-tight) 0;
      line-height: getCssVar(grid-image-upload, box-height);

      img {
        object-fit: fill;
      }      
    }
  }
}


@include b(form-item){

  @include b(image-caropping-upload) {
    @include when(show-default){
      padding: getCssVar(form-item, hover-edit-padding);
    }
  }
}